<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#mapPage {
				height: 100%;
				position: relative;
			}

			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
		</div>
	</body>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>

	<!-- 百度地图 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=00GWrAOlL9IlHnHLI5oblm8Apb0FNp5o"></script>

	<!-- 引入jquery -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------

			let map = new BMapGL.Map("container"); // 创建地图实例
			let point = new BMapGL.Point(106.7091771, 26.62990674); // 创建点坐标 
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

			let scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			let zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			let cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);
			var locationControl = new BMapGL.LocationControl(); // 添加定位控件
			map.addControl(locationControl);

			// // 添加中心点坐标标注点
			// let marker = new BMapGL.Marker(point); // 创建标注   
			// map.addOverlay(marker); // 将标注添加到地图中
			// // 监听标注事件
			// marker.addEventListener("click", function() {
			// 	console.log("您点击了标注");
			// 	// 跳转到标注地图页面
			// 	uni.navigateTo({
			// 		url: ''
			// 	})
			// });

			let geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				// let lat = r.point.lat;
				// let lng = r.point.lng;
				// const pointBak = new BMapGL.Point(lng, lat);
				// const convertor = new BMapGL.Convertor();
				// convertor.translate([pointBak], 1, 5, function(resPoint) {
				// 	if (resPoint && resPoint.points && resPoint.points.length > 0) {
				// 		lng = resPoint.points[0].lng;
				// 		lat = resPoint.points[0].lat;
				// 	}
				// 	const point = new BMapGL.Point(lng, lat);
				// 	var mk = new BMapGL.Marker(point);
				// 	map.addOverlay(mk);
				// 	map.panTo(point);
				// 	console.log('当前位置：' + point.lng + ',' + point.lat);
				// 	const geo = new BMapGL.Geocoder();
				// 	geo.getLocation(point, (res) => {
				
				// 	});
				// });
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					console.log('当前位置：' + r.point.lng + ',' + r.point.lat);
					// 添加标注点
					let marker = new BMapGL.Marker(r.point); // 创建标注   
					map.addOverlay(marker); // 将标注添加到地图中
					// 监听标注事件
					marker.addEventListener("click", function() {
						console.log("您点击了标注");
						// 跳转到标注地图页面
						uni.navigateTo({
							url: ''
						})
					});
				} else {
					console.log('failed:' + this.getStatus());
				}
			});

			// 点击获取经纬度
			let geoc = new BMapGL.Geocoder();
			map.addEventListener("click", function(e) {
				//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
				let pt = e.point;
				geoc.getLocation(pt, function(rs) {
					//addressComponents对象可以获取到详细的地址信息
					let addComp = rs.addressComponents;
					let site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
						addComp.streetNumber;
					console.log(site);
					console.log(pt.lng);
					console.log(pt.lat);
				});
			});

			/* // 向地图中添加文本标注
			let content = "基地1";
			let label = new BMapGL.Label(content, { // 创建文本标注
				position: point, // 设置标注的地理位置
				offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
			})
			map.addOverlay(label); // 将标注添加到地图中
			label.setStyle({ // 设置label的样式
				color: '#000',
				fontSize: '30px',
				border: '2px solid #1E90FF'
			})
			// 监听文本标注事件
			label.addEventListener("click", function() {
				alert("您点击了标注");
			}); */
		});
	</script>
</html>
